<template lang="pug">
  .CreateAccountModal
    Modal(
      v-model="isShowCreateModal"
      :title="isCreate ? '新增产品清单' : '编辑产品清单'"
      class-name="vertical-center-modal"
      width="480"
    )
      Form.ivu-row.has-rules-item2.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="120")
        FormItem.form-item.ivu-col(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
          template(v-if="item.type === 'select'")
            Select(v-if="item.model == 'invoiceTaxName'" v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable :disabled="item.isDisabled" multiple @on-change="invoiceTaxNameChange")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.label") {{c_item.label}}
            Select(v-else v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable :disabled="item.isDisabled" :multiple="item.multiple")
              Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.label") {{c_item.label}}
      
      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit" :loading="!isCanSubmit") 保存
</template>

<script>
import { Common } from '@/utils/common.js'
import _cloneDeep from 'clone-deep'
import { FinanceApi } from '@/api/Finance.api.js'
import { FinanceProductApi } from '@/api/FinanceProduct.api.js'

export default {
  name: 'CreateModal',

  watch: {
  },

  computed: {
  },

  data () {
    const validateInvoiceTaxName = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error('请选择开票税目'))
      } else {
        callback()
      }
    }
    return {
      isShowCreateModal: false,
      isCreate: true,
      isCanSubmit: true,
      formData: {
        id: null,
        businessName: null,
        productType: null,
        productDetail: null,
        invoiceTaxName: '',
        taxRate: null,
      },
      formItem: [
        { type: 'select', label: '业务板块：', placeholder: '请选择业务板块', prop: 'businessName', model: 'businessName', style: 'ivu-col-span-24', options: 'FinanceBusinessSegments' },
        { type: 'select', label: '产品类别：', placeholder: '请选择产品类别', prop: 'productType', model: 'productType', style: 'ivu-col-span-24', options: 'FinanceProductType' },
        { type: 'select', label: '产品：', placeholder: '请选择产品', prop: 'productDetail', model: 'productDetail', style: 'ivu-col-span-24', options: 'FinanceProduct' },
        { type: 'select', label: '开票税目：', placeholder: '请选择开票税目', prop: 'invoiceTaxName', model: 'invoiceTaxName', style: 'ivu-col-span-24', options: 'FinanceTaxName', multiple: true },
        { type: 'select', label: '税率：', placeholder: '请选择税率', prop: 'taxRate', model: 'taxRate', style: 'ivu-col-span-24', options: 'FinanceTaxRate' },
      ],
      rules: {
        businessName: [
          { required: true, message: '请选择业务板块', trigger: 'change' }
        ],
        productType: [
          { required: true, message: '请选择产品类别', trigger: 'change' }
        ],
        productDetail: [
          { required: true, message: '请选择产品', trigger: 'change' }
        ],
        invoiceTaxName: [
          { required: true, message: '请选择开票税目', trigger: 'change', validator: validateInvoiceTaxName }
          // { required: true, message: '请选择开票税目', trigger: 'change' }
        ],
        taxRate: [
          { required: true, message: '请选择税率', trigger: 'change' }
        ]
      },
      arrListDown: {}
    }
  },

  mounted () {
  },

  methods: {
    // 监听所有调用的方法
    listenCall (methodsWords, ...values) {
      this[methodsWords](...values)
    },

    cancel () {
      this.isShowCreateModal = false
    },

    show () {
      this.isCanSubmit = true
      this.isShowCreateModal = true
      this.$refs.formData.resetFields({})
    },

    // 提交表单
    handleSubmit () {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          this.isCanSubmit = false
          var params = {...this.formData, invoiceTaxName: this.formData.invoiceTaxName.join(';')}
          FinanceProductApi.postFinanceProduct(params).then(resp=>{
            if (resp.data.success) {
              this.$Message.success(resp.data.message)
              this.isShowCreateModal = false
              this.$emit('query')
            } else {
              this.isCanSubmit = true
              this.$Message.warning(resp.data.message)
            }
          })
        } else {
          this.isCanSubmit = true
          this.$Message.warning('输入有误，请返回检查!')
        }
      })
    },

    // 根据ID获取信息
    async getModel (id) {
      var params = {id: id}
      let resp = await FinanceProductApi.getInfo(params)
      if (resp.status === 200 && resp.data.success) {
        var result = resp.data.data
        // this.parentCompanysChange('parentID', result.parentID)
        // 相应赋值
        Object.keys(this.formData).forEach(key => {
          if (key == 'invoiceTaxName') {
            this.formData[key] = result[key].split(';')
          } else {
            this.formData[key] = result[key] + ''
          }
        })
        console.log('❤ this.formData: ', this.formData)
      } else {
        this.$Message.error({
          content: resp.data.message,
          duration: 10,
          closable: true
        })
      }
    },

    invoiceTaxNameChange (value) {
      console.log('value: ', value)
    }

    // 获取所有集团下的公司-1
    // parentCompanysChange (model, event) {
    //   console.log('获取所有集团下的公司 model: ', model, ', event: ', event)
    //   this.selectedParentCompany = this.arrListDown.parentCompanys.find(item => {return item.value === event})
    //   console.log('选中的集团 this.selectedParentCompany: ', this.selectedParentCompany)
    //   if (event) {
    //     FinanceApi.getAllChildCompanys({companyGuid: event}).then(resp => {
    //       var arr = []
    //       if (resp.status == 200 && resp.data) {
    //         resp.data.map(item => {
    //           if (item.group == 'customer') {
    //             item.items.map(c_item => {
    //               arr.push({label: c_item.value, value: c_item.key})
    //             })
    //           }
    //         })
    //         this.arrListDown.childrenCompanys = arr
    //       }
    //     })
    //   }
    // },
  }
}
</script>

<style lang="less" scoped>

</style>
